<template>
  <section>
    <el-button size="mini" @click="addGoodsType" type="primary" icon="el-icon-plus"/>
    <el-row>
      <el-table :data="mallGoodsTypeList">
        <el-table-column type="index" width="30"/>
        <el-table-column label="类型名称" prop="name"/>
        <el-table-column label="业务类型" prop="businessTypeName"/>
        <el-table-column label="所需属性" width="380px">
          <template slot-scope="scope">
            <el-row v-for="(prop,index) in propList" :key="index">
              <el-col :span="2" v-if="scope.row.data.props[prop.code]">{{prop.key}}</el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <i class="el-icon-edit" style="color:blue;font-size: 16px;font-weight: bold" @click="editBtn(scope.row)"/>
            <i class="el-icon-close" style="color:red;font-size: 16px;font-weight: bold;margin-left: 10px" @click="del(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog :title="currType.id?'编辑':'新建'" :visible.sync="showEditDialog" v-if="showEditDialog" :before-close="getMallGoodsTypeList">
      <new-type :type="currType" v-on:confirm="confirmEditDialogBtn"></new-type>
    </el-dialog>
  </section>
</template>

<script>
  import newType from './newType'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "goodsType",
    components:{newType},
    data() {
      return {
        mallGoodsTypeList:null,
        propList:[{key:'地址',val:true,code:'needAddress'}],
        showEditDialog:false,
        currType:null,
        businessTypeList:null
      }
    },
    created() {
      //加载商品类型列表
      this.getMallGoodsTypeList()
      this.getBusinessType()
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getBusinessType(){
        this.fetch({name:"getBusinessTypeList"})
          .then(res=>{
            console.log('业务类型列表------------',res)
            this.businessTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addGoodsType(){
        this.currType={storeId:this.department.id,data:{}}
        this.showEditDialog=true
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList",data:{storeId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.mallGoodsTypeList = res
            this.showEditDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currType={id:row.id,name:row.name,businessTypeCode:row.businessTypeCode,data:row.data}
        this.showEditDialog=true
      },
      del(row){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteMallGoodsType",data:{id:row.id}})
              .then(res=>{
                this.getMallGoodsTypeList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      confirmEditDialogBtn(data){
        if(data.id){
          //更新
          this.updateMallGoodsType(data)
        }else {
          //新建
          this.createMallGoodsType(data)
        }
      },
      updateMallGoodsType(row){
        console.log(row)
        this.fetch({name:"updateMallGoodsType",data:row})
          .then(res=>{
            console.log(res)
            this.getMallGoodsTypeList()
            this.showEditDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createMallGoodsType(row){
        this.fetch({name:"createMallGoodsType",data:row})
          .then(res=>{
            console.log(res)
            this.getMallGoodsTypeList()
            this.showEditDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
